import {createStyles} from "antd-style"
import MemoryCard from "@/pages/HomePage/_Home/MemoryCard.tsx";
import CpuInfoCard from "@/pages/HomePage/_Home/CpuInfoCard.tsx";
import DiskInfoCard from "@/pages/HomePage/_Home/DiskInfoCard.tsx";
import NetworkInfoCard from "@/pages/HomePage/_Home/NetworkInfoCard.tsx";
import useAppState from "@/store/AppState.ts";
import GpuInfoCard from "@/pages/HomePage/_Home/GpuInfoCard.tsx";
import SystemInfoCard from "@/pages/HomePage/_Home/SystemInfoCard.tsx";
import USBTreeCard from "@/pages/HomePage/_Home/USBTreeCard.tsx";

const useStyles = createStyles(({css, token}) => {
    return {
        container: css`

        `,
    }
})

export default () => {
    const {styles} = useStyles()
    const width = useAppState(state => state.width)

    return (
        <div className={styles.container}>
            <CpuInfoCard/>
            <MemoryCard/>
            <div
                style={{
                    display:  width > 600 ? "flex" : "block"
                }}
            >
                <DiskInfoCard/>
                <NetworkInfoCard/>
            </div>
            <div
                style={{
                    display:  width > 600 ? "flex" : "block"
                }}
            >
                <GpuInfoCard/>
                <SystemInfoCard/>
            </div>
            <USBTreeCard/>
        </div>
    )
}
